<template>
  <div class="login-container">
    <header>
      <div class="layui-col-xs12 layui-col-md4 headCenter">
        <div class="grid-demo xtbt">山西省革命文物数据库管理系统</div>
      </div>
    </header>
    <section class="section" style="background: rgb(1, 153, 203);">
      <div class="layui-col-xs6 layui-col-md6">
        <div class="grid-demo">
          <img
            oncontextmenu="return false;"
            class="banner"
            src="@/assets/balujunbg.png"
          />
        </div>
      </div>
      <div class="layui-col-xs12 layui-col-md6">
        <div class="grid-demo">
          <div class="login-register-view">
            <Login></Login>
          </div>
        </div>
      </div>
    </section>
    <footer>
      <div class="copyright">
        <a target="_blank" href="#">
          ©<span class="sysbq">山西省八路军太行纪念馆</span>
        </a>
      </div>
    </footer>
  </div>
</template>

<script>
import Login from './login';
// import Register from './register';
export default {
  components: { Login },
  data() {
    return {
      showLogin: true
    };
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  @media screen and (max-width: 1000px) {
    section > .layui-col-xs6,
    .headRight,
    .headLeft {
      display: none;
    }
    .headCenter {
      width: 100%;
    }
    .xtbt {
      font-size: 35px !important;
    }
  }
  header {
    /* 垂直水平居中 */
    height: 15vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .grid-demo {
    text-align: center;
  }
  .xtbt {
    font-size: 2.3vw;
  }
  section {
    height: 65vh;
    text-align: center;
    min-height: 382px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .banner {
    height: 50vh;
  }

  footer {
    height: 20vh;
    width: 100%;
    ul {
      text-decoration: none;
    }
  }
  .icons {
    text-align: center;
    margin: 6vh 0 0 0;
  }
  .icons li {
    width: 87px;
    display: inline-block;
  }
  .icons li a {
    font-size: 28px;
    width: 87px;
  }
  .copyright {
    width: 100%;
    margin: 0;
    text-align: center;
    line-height: 20vh;
  }

  .login-register-view {
    margin: 0 auto;
    background: #fff;
    border-radius: 7px;
    width: 380px;
    height: 41vh;
    min-height: 290px;
  }
}
</style>

<style lang="scss" scoped>
.login-container {
  @media screen and (min-width: 992px) {
    .layui-col-md6 {
      width: 50%;
      float: left;
    }
  }

  img {
    border: none;
    vertical-align: middle;
  }

  .layui-input {
    display: block;
    line-height: 1.3;
    outline: 0;
    background-color: #fff;
    -webkit-transition: all 0.3s;
    box-sizing: border-box;
    font-size: 14px;
  }

  .layui-col-md4,
  .layui-col-xs12 {
    position: relative;
    display: block;
    box-sizing: border-box;
  }
}
</style>
